<template>
  <div style="height:100%;widht:100%" v-loading='loading'>
    <div class='left'>
      <div class="tab-box" style="position:relative;">
        <div class="bottom" style="margin-top:20px;height:calc(100% - 52px);padding:0 10px">
          <a-input-search style="margin-bottom: 8px" @change="onChange" allow-clear />
          <Tree :treeData='gData' :replaceFields='replaceFields' :selectedKeys='test' @handClick='handClick'></Tree>
        </div>
        <div class="btn-group-item" style="position:absolute;right:5px;bottom:5px;" @click="tjfl">
          <IconFont type="swx-icon-tianjia" />
          添加分类
        </div>
      </div>
    </div>

    <!-- 点击一级节点 -->
    <div class='right' v-if="flag && !tjfLFlag">
      <div class="tab-box" style="padding:10px">
        <div style="height:50px;line-height:50px">
          <div style="float:right">
            <div class="btn-group-item" style="margin-right:10px" :class="nodeMessege.isSave?'':'notAllowedBtn'" @click="isSaveBtn">
              <IconFont type="swx-icon-baocun" />
              保存
            </div>
            <div class="btn-group-item" style="margin-right:10px" @click="tjzj">
              <IconFont type="swx-icon-tianjia" />
              添加组件
            </div>
            <div class="btn-group-item" @click="node1shanChu" :class="nodeMessege.isSave?'':'notAllowedBtn'">
              <IconFont type="swx-icon-shanchu" />
              删除
            </div>
          </div>
        </div>
        <div style="height:80px;">
          <table class="riginalTable" style="table-layout:fixed;">
            <tr>
              <td>上级分类</td>
              <td style="width:15%;padding-right:0;">
                <a-tree-select v-model="form.fflbm" :disabled='true' show-search style="width: 100%;" :dropdown-style="{maxHeight: '400px', overflow: 'auto' }"
                  allow-clear tree-default-expand-all>
                  <a-tree-select-node v-for="(item,index) in zjflLists" :key="item.flbm" :title="item.flmc" :value="item.flbm">
                    <a-tree-select-node v-for="(el,i) in item.children" :key="el.flbm" :title="el.flmc" :value="el.flbm">
                      <a-tree-select-node v-for="(ele,i1) in el.children" :key="ele.flbm" :title="ele.flmc" :value="ele.flbm">
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </td>
              <td>分类名称</td>
              <td>
                <input :style="{cursor:nodeMessege.isSave?'':'not-allowed'}" class="riginalInput" v-model="form.flmc" :disabled='!nodeMessege.isSave' />
              </td>
            </tr>
            <tr>
              <td>序号</td>
              <td>
                <input style="cursor:not-allowed" class="riginalInput" v-model="form.flxh" disabled />
              </td>
              <td></td>
              <td></td>
            </tr>

          </table>
        </div>
        <div style="margin-top:10px;height:calc(100% - 190px)">
          <a-table :columns="columns" :data-source="tableLists" :pagination="pagination">
          </a-table>
        </div>
      </div>
    </div>

    <!-- 点击二级节点 和添加组件 -->
    <div class='right' v-if="!flag && !tjfLFlag">
      <div class="tab-box" style="padding:10px">
        <div style="height:50px;line-height:50px">
          <div style="float:right">
            <div class="btn-group-item" style="margin-right:10px" @click="baoCunBtn">
              <IconFont type="swx-icon-tianjia" />
              保存
            </div>
            <div class="btn-group-item" :class="[!flag && nodeMessege.level=='2'?'':'notAllowedBtn']" @click="delet">
              <IconFont type="swx-icon-shanchu" />
              删除
            </div>
          </div>
        </div>
        <div style="height:200px;">
          <table class="riginalTable" style="table-layout:fixed;">
            <tr>
              <td>组件名称
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="tableForm.zjmc" />
              </td>
              <td>组件显示名称
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="tableForm.zjxsmc" />
              </td>
            </tr>
            <tr>
              <td>组件地址
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="tableForm.zjdz" />
              </td>
              <td>组件序号
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="tableForm.zjxh" />
              </td>
            </tr>
            <tr>
              <td>权限编辑器名称</td>
              <td>
                <input class="riginalInput" v-model="tableForm.zjbjqmc" />
              </td>
              <td>权限编辑器地址</td>
              <td>
                <input class="riginalInput" v-model="tableForm.zjbjqdz" />
              </td>
            </tr>
            <tr>
              <td>组件初始参数</td>
              <td>
                <input class="riginalInput" v-model="tableForm.zjcs" />
              </td>
              <td>组件分类</td>
              <td style="width:100%;padding-right:0;">
                <a-select v-model="tableForm.flbm" style="width:100%;">
                  <a-select-option :value="item.flbm" v-for="(item,i) in zjflLists" :key="i">
                    {{item.flmc}}
                  </a-select-option>
                </a-select>
              </td>
            </tr>
            <tr>
              <td>是否第三方组件</td>
              <td style="text-align:left;">
                <a-radio-group v-model="tableForm.sfdsfzj">
                  <a-radio value="Y">
                    是
                  </a-radio>
                  <a-radio value="N">
                    否
                  </a-radio>
                </a-radio-group>
              </td>
              <td>适用范围</td>
              <td style="text-align:left;">
                <a-checkbox-group v-model="tableForm.syfw" name="checkboxgroup" :options="plainOptions" />
              </td>
            </tr>
            <tr style="width:100%;">
              <td style="width:300px">说明</td>
              <td>
                <input class="riginalInput" v-model="tableForm.zjsm" />
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <!-- 添加分类 -->
    <div class='right' v-if="tjfLFlag">
      <div class="tab-box" style="padding:10px">
        <div style="height:50px;line-height:50px">
          <div style="float:right">
            <div class="btn-group-item" style="margin-right:10px" @click="tjflBaoCun">
              <IconFont type="swx-icon-baocun" />
              保存
            </div>
            <div class="btn-group-item notAllowedBtn" style="margin-right:10px">
              <IconFont type="swx-icon-tianjia" />
              添加功能
            </div>
            <div class="btn-group-item notAllowedBtn">
              <IconFont type="swx-icon-shanchu" />
              删除
            </div>
          </div>
        </div>
        <div style="height:80px;">
          <table class="riginalTable" style="table-layout:fixed;">
            <tr>
              <td>上级分类</td>
              <td style="width:15%;padding-right:0;">
                <a-tree-select v-model="tjflForm.fflbm" show-search style="width: 100%;" :dropdown-style="{maxHeight: '400px', overflow: 'auto' }" allow-clear
                  tree-default-expand-all>
                  <a-tree-select-node v-for="(item,index) in gnflLists" :key="item.flbm" :title="item.flmc" :value="item.flbm">
                    <a-tree-select-node v-for="(el,i) in item.children" :key="el.flbm" :title="el.flmc" :value="el.flbm">
                      <a-tree-select-node v-for="(ele,i1) in el.children" :key="ele.flbm" :title="ele.flmc" :value="ele.flbm">
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </td>
              <td>分类名称
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="tjflForm.flmc" />
              </td>
            </tr>
            <tr>
              <td>序号
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="tjflForm.flxh" />
              </td>
              <td>分类图标</td>
              <td>
                <input class="riginalInput" v-model="tjflForm.fltb" />
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import service from '../api/api';
const plainOptions = ["省级院", "市级院", "基层院"];
const columns = [
  {
    title: "序号",
    dataIndex: "zjxh",
  },
  {
    title: "单位名称",
    dataIndex: "dwmc",
  },
  {
    title: "组件名称",
    dataIndex: "zjmc",
  },
  {
    title: "组件Url地址",
    dataIndex: "zjdz",
  },
  {
    title: "组件编辑器名称",
    dataIndex: "zjbjqmc",
  },
  {
    title: "组件编辑器Url地址",
    dataIndex: "zjbjqdz",
  },
  {
    title: "组件编码",
    dataIndex: "zjbm",
  },
];
import Tree from "./tree";
import vuex from "vuex";
const logininfo = vuex.createNamespacedHelpers("login");
export default {
  data() {
    return {
      loading: false,
      // 分页
      pagination: {
        pageSize: 10, // 一页的数据限制
        current: 1, // 当前页
        total: 0, // 总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ["5", "10", "30"], // 指定每页可以显示多少条
        onShowSizeChange: (current, pagesize) => {
          // 改变 pageSize时的回调
          this.pagination.pageNum = current;
          this.pagination.pageSize = pagesize;
          this.getTableLists();
        },
        onChange: (current) => {
          // 切换分页时的回调，
          this.pagination.current = current;
          this.getTableLists();
        },
        // 可以展示总数
        showTotal: (total) => {
          return `总共：${total}条`;
        },
      },
      columns,
      plainOptions,
      replaceFields: {
        children: "children",
        title: "flmc",
        key: "flbm",
      },
      test: [], //默认选中
      gData: [], //树形数据
      nodeMessege: "", //节点信息
      tableLists: [], //table数据
      fbmbm: "",
      flag: true,
      tableForm: {
        zjmc: "",
        zjxsmc: "",
        zjdz: "",
        zjxh: "",
        zjbjqmc: "",
        zjbjqdz: "",
        zjcs: "",
        flbm: "",
        sfdsfzj: "",
        syfw: [],
        zjsm: "",
      },
      zjflLists: [],
      tjfLFlag: false,
      gnflLists: [],
      tjflForm: {
        fflbm: "",
        flmc: "",
        flxh: "",
      },
      form: {
        flbm: "",
        fflbm: "",
        flmc: "",
        flxh: "",
      },
    };
  },
  components: {
    Tree,
  },
  created() {
    this.serchMenuLeft();
    // 添加分类的时候刷新
    this.getSelects();
  },
  methods: {
    getTop() {
      let data = {
        flbm: this.nodeMessege.flbm,
      };
      service.gnzj.getSingZjfl(data).then((res) => {
        if (res.code == 0) {
          this.form = res.data || this.form;
        }
      });
    },
    isSaveBtn() {
      let data = {
        ...this.form,
        dwbm: this.personInfo.dwbm,
        dwmc: this.personInfo.dwmc,
        zhxgrbm: this.personInfo.rybm,
        zhxgrmc: this.personInfo.mc,
        cjrbm: this.personInfo.rybm,
        cjrmc: this.personInfo.mc,
      };
      service.gnzj.updateZjfl(data).then((res) => {
        if (res.code == 0) {
          this.$message.success("操作成功");
          this.serchMenuLeft();
          this.getSelects();
        }
      });
    },
    // 一级节点得删除
    node1shanChu() {
      let data = {
        flbm: this.nodeMessege.flbm,
        zhxgrbm: this.personInfo.rybm,
        zhxgrmc: this.personInfo.mc,
      };
      service.gnzj.deleteZjfl(data).then((res) => {
        if (res.code == 0) {
          this.$message.success("操作成功");
          this.serchMenuLeft();
        }
      });
    },
    tjfl() {
      this.tjfLFlag = true;
      this.getSelectLists();
    },
    async tjflBaoCun() {
      if (this.tjflForm.flxh != "" && this.tjflForm.flmc != "") {
        let data = {
          cjrbm: this.personInfo.rybm,
          cjrmc: this.personInfo.mc,
          dwbm: this.personInfo.dwbm,
          dwmc: this.personInfo.dwmc,
          fflbm: this.tjflForm.fflbm,
          flmc: this.tjflForm.flmc,
          fltb: "",
          flxh: this.tjflForm.flxh,
        };
        let res = await service.gnzj.addZjfl(data);
        if (res.code == 0) {
          this.$message.success("新增成功");
          this.serchMenuLeft();
          this.getSelects();
          // this.getSelectLists();
        }
      } else {
        this.$message.warning("完善信息");
      }
    },
    // 获取功能分类下拉列表
    getSelectLists() {
      service.gnzj
        .queryZjflByDwbm({ dwbm: this.personInfo.dwbm })
        .then((res) => {
          if (res.code == 0) {
            this.gnflLists = res.data;
          }
        });
    },
    // 添加组件
    tjzj() {
      this.tableForm = {
        zjmc: "",
        zjxsmc: "",
        zjdz: "",
        zjxh: "",
        zjbjqmc: "",
        zjbjqdz: "",
        zjcs: "",
        flbm: "",
        sfdsfzj: "",
        syfw: [],
        bz: "",
      };
      this.flag = false;
      // this.getSelects();
      this.tableForm.flbm = this.nodeMessege.flbm;
    },

    // 保存按钮
    baoCunBtn() {
      if (
        this.tableForm.zjmc != "" &&
        this.tableForm.zjxsmc != "" &&
        this.tableForm.zjdz != "" &&
        this.tableForm.zjxh != ""
      ) {
        switch (this.nodeMessege.level) {
          case 1:
            this.baoCunApi();
            break;
          case 2:
            this.xiuGaiApi();
            break;
        }
      } else {
        this.$message.warning("完善必填信息");
      }
    },
    // 保存APi
    async baoCunApi() {
      let res = await service.gnzj.addZjdy({
        ...this.tableForm,
        dwbm: this.personInfo.dwbm,
        dwmc: this.personInfo.dwmc,
        cjrbm: this.personInfo.rybm,
        cjrmc: this.personInfo.mc,
      });
      if (res.code == 0) {
        this.$message.success("操作成功");
        this.flag = true;
        this.serchMenuLeft();
      }
    },
    // 修改APi
    async xiuGaiApi() {
      let res = await service.gnzj.updateZjdy({
        ...this.tableForm,
        dwbm: this.personInfo.dwbm,
        dwmc: this.personInfo.dwmc,
        zhxgrbm: this.personInfo.rybm,
        zhxgrmc: this.personInfo.mc,
      });
      if (res.code == 0) {
        this.$message.success("操作成功");
        this.flag = true;
        this.serchMenuLeft();
      }
    },
    // 删除
    async delet() {
      if (this.nodeMessege.level == 1) return;
      let data = {
        zhxgrbm: this.personInfo.rybm,
        zhxgrmc: this.personInfo.mc,
        zjbm: this.nodeMessege.flbm,
      };
      let res = await service.gnzj.deleteZjdy(data);
      if (res.code == 0) {
        this.serchMenuLeft();
        // this.getSelectLists();
        this.getSelects();
        this.$message.success("删除成功");
      }
    },
    getSelects() {
      service.gnzj.queryZjflByDwbm().then((res) => {
        if (res.code == 0) {
          this.zjflLists = res.data;
        }
      });
    },
    serchMenuLeft() {
      service.gnzj.queryTree2({ dwbm: this.personInfo.dwbm }).then((res) => {
        if (res.code == 0) {
          this.flag = true;
          this.gData = res.data;
          this.gData1 = JSON.parse(JSON.stringify(res.data)); //用于筛选
          this.test = [res.data[0].flbm]; //设置默认选中值
          this.nodeMessege = res.data[0]; //节点信息
          this.tableForm.flbm = this.nodeMessege.flbm;
          this.getTableLists(); //查询表格
          this.getTop();
          this.tjfLFlag = false;
        }
      });
    },
    // 获取组件分类下拉列表

    handClick(e) {
      this.tjfLFlag = false;
      this.flag = true;
      this.test = e.selectedKeys;
      this.nodeMessege = e.info.node.dataRef;
      this.getTop();
      if (this.nodeMessege.level == 1) {
        this.flag = true;
      }
      if (this.nodeMessege.level == 2) {
        this.flag = false;
        this.getZjdyMsg();
        return;
      }
      this.getTableLists(); //查询表格
    },
    // 单个查询
    async getZjdyMsg() {
      let data = {
        zjbm: this.nodeMessege.flbm,
      };
      let res = await service.gnzj.getZjdy(data);
      if (res.code == 0) {
        this.tableForm = res.data;
      }
    },
    getTableLists() {
      this.loading = true;
      let data = {
        filter: {
          flbm: this.nodeMessege.flbm,
          dwbm: this.personInfo.dwbm,
        },
        orderBy: "",
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
      };
      service.gnzj.getTable2(data).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.tableLists = res.data.list;
          this.pagination.total = res.data.total;
        }
      });
    },

    onChange(e) {
      const value = e.target.value;
      if (value) {
        const tree = JSON.parse(JSON.stringify(this.gData1));
        this.gData = this.filter(tree, value);
      } else {
        this.gData = this.gData1;
      }
    },
    // nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组
    filter(nodes, query) {
      // 条件就是节点的title过滤关键字
      let predicate = function (node) {
        if (node.flmc.indexOf(query) > -1) {
          return true;
        } else {
          return false;
        }
      };
      if (!(nodes && nodes.length)) {
        return [];
      }
      let newChildren = [];
      for (let node of nodes) {
        // 以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
        // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
        // 2. 自己本身符合条件
        let subs = this.filter(node.children, query);
        if (predicate(node)) {
          newChildren.push(node);
        } else if (subs && subs.length) {
          node.children = subs;
          newChildren.push(node);
        }
      }
      return newChildren.length ? newChildren : [];
    },
  },
  computed: {
    ...logininfo.mapState(["personInfo"]),
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.tableNodeMessege = this.getChidlren1(
            this.tableLists,
            selectedRowKeys[0]
          );
          this.selectedRows = selectedRows;
        },
      };
    },
  },
};
</script>

<style lang='less' scoped>
.main-container {
  width: 100%;
  height: 100%;
  padding: 16px;
  .left {
    float: left;
    width: 310px;
    height: 100%;
  }
  .right {
    float: right;
    height: 100%;
    width: calc(100% - 326px);
  }
}
/deep/ .ant-tabs-bar {
  margin: 0;
}
/deep/ .ant-tabs-tabpane {
  padding: 16px;
}
/deep/ .ant-tabs {
  height: 100%;
}
/deep/ .ant-tabs-content {
  height: calc(100% - 40px);
}
/deep/ .ant-tabs-tabpane {
  height: 100%;
}
/deep/ .tab-box,
/deep/ .ant-tabs {
  height: 100%;
}

/deep/ .ant-input:focus {
  box-shadow: none;
}
.bydm /deep/ .ant-modal {
  min-width: 700px !important;
}
/deep/ .ant-tabs-content {
  height: calc(100% - 44px);
}
/deep/ .ant-table-wrapper {
  height: 100%;
  .ant-spin-nested-loading {
    height: 100%;
    .ant-spin-container {
      height: 100%;
      .ant-table {
        height: 100%;
        overflow: auto;
      }
    }
  }
}
/deep/ .ant-table-body {
  border: none !important;
}
/deep/ .ant-tree {
  height: calc(100% - 42px);
  overflow: auto;
}
/deep/ .box > .ant-tabs > .ant-tabs-content {
  height: calc(100% - 37px) !important;
}
.riginalTable /deep/ .ant-select-selection {
  border: none;
}
</style>